<template>
	<div class="words-layout" :class="[{'is-vertical': isVertical }]">
		<template v-for="(item, index) in splitWords" :key="item">
			<div class="start-pos"><Words v-bind="$attrs" :text="item" :ping-yi="wordsPingYi(index)" :size="wordsSize" /></div>
			<div class="arrow iconfont icon-zhuan" v-if="(index+1) < splitWords.length"></div>
		</template>
		<div class="delete" v-if="showDelete" @click="handleDelete">
			<i class="iconfont icon-guanbi"></i>
		</div>
	</div>
	<slot :data="splitWords" />
</template>

<script setup>
	import { computed, onMounted, ref } from "vue";
	import Words from "./index.vue"
	const props = defineProps({
		text: {
			type: String,
			default: ""
		},
		horizontal: {
			type: Boolean,
			default: true
		},
		showDelete: Boolean,
		id: {
			type: [Number, String],
			default: ''
		},
		pingYi: {
			type: Array,
			default: () => ([])
		},
		categoryItem: {
			type: Object,
			default: () => ({})
		}
	})
	const emit = defineEmits(['delete'])
	const splitWords = computed(() => props.text ? props.text.split('|') : [])
	const isVertical = computed(() => {
		if(props.horizontal) {
			return false
		}
		const status = splitWords.value.some(item => item.length > 1)
		return status
	})
	// 拼音
	const wordsPingYi = computed(() => {
		return (index) => {
			if(!props.pingYi.length) {
				return ''
			}
			return props.pingYi[index]
		}
	})
	// 
	// 删除
	const handleDelete = () => {
		emit('delete', props.id)
	}
	// 文字大小
	const wordsSize = computed(() => {
		const words = splitWords.value.join('')
		const length = words.length
		const size = props.categoryItem?.readPageWordsSize
		return size?.[length] || props.categoryItem?.wordsSize
	})
</script>

<style lang="scss" scoped>
.words-layout {
	display: inline-flex;
	align-items: center;
	&.is-vertical {
		flex-direction: column;
		.arrow {
			padding: 1.2rem;
			transform: rotate(90deg);
		}
	}
	.arrow {
		padding: 0 0.8rem;
		opacity: 0.6;
	}
	.delete {
		color: #fff;
		width: 2rem;
		height: 2rem;
		border-radius: 0.8rem;
		background-color: #ccc;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 0.8rem;
		.iconfont {
			font-size: 1rem;
		}
	}
}
</style>